<template>
  <Modal title="OTA处理" :width="1000" :show-confirm-button="false">
    <div class="ota-processing-modal">
      <div class="search-form">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-input
              v-model:value="searchForm.serialNumber"
              placeholder="流水号"
            />
          </a-col>
          <a-col :span="6">
            <a-input
              v-model:value="searchForm.billNumber"
              placeholder="账单号"
            />
          </a-col>
          <a-col :span="6">
            <a-date-picker
              v-model:value="searchForm.startDate"
              placeholder="起始时间"
              show-time
            />
          </a-col>
          <a-col :span="6">
            <a-date-picker
              v-model:value="searchForm.endDate"
              placeholder="结束时间"
              show-time
            />
          </a-col>
        </a-row>
        <div class="search-button">
          <a-button type="primary">立即搜索</a-button>
        </div>
      </div>

      <div class="ota-table">
        <a-table
          :columns="tableColumns"
          :data-source="otaData"
          :pagination="false"
          size="small"
        />
        <div class="table-footer">
          <span>数量: {{ otaData.length }}</span>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

defineOptions({
  name: 'OtaProcessingModal',
});

const searchForm = ref({
  serialNumber: '',
  billNumber: '',
  startDate: null,
  endDate: null,
});

const tableColumns = [
  { title: '账单号', dataIndex: 'billNumber', key: 'billNumber' },
  { title: '交易流水号', dataIndex: 'serialNumber', key: 'serialNumber' },
  { title: '支付方式', dataIndex: 'paymentMethod', key: 'paymentMethod' },
  { title: '支付金额', dataIndex: 'amount', key: 'amount' },
  { title: '支付时间', dataIndex: 'paymentTime', key: 'paymentTime' },
];

const otaData = ref([
  {
    key: '1',
    billNumber: 'MAS32565104618064638',
    serialNumber: '1001/1002/1003/1005',
    paymentMethod: '微信',
    amount: '¥234.00',
    paymentTime: '2018/01/01 20:32',
  },
  {
    key: '2',
    billNumber: 'MAS32565104618064638',
    serialNumber: '1001/1002/1003/1005',
    paymentMethod: '支付宝',
    amount: '¥234.00',
    paymentTime: '2018/01/01 20:32',
  },
]);

const [Modal, modalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    searchForm.value = {
      serialNumber: '',
      billNumber: '',
      startDate: null,
      endDate: null,
    };
  },
});

const handleCancel = () => {
  modalApi.close();
};
</script>

<style scoped>
.ota-processing-modal {
  padding: 20px 0;
}

.search-form {
  padding: 15px;
  margin-bottom: 20px;
  background: #f5f5f5;
  border-radius: 6px;
}

.search-button {
  margin-top: 15px;
  text-align: center;
}

.ota-table {
  margin-bottom: 20px;
}

.table-footer {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}
</style>
